<template>
    <div>
      <div class="header">
        <img src="../img/left.png" @click="back">
        <h4>我的面签地址</h4>
        <div @click="showAddress">新增</div>
      </div>
      <div class="Info addAddress" v-show="addShow">
        <img @click="closeAdd" src="../img/cloneAdd.png" alt="">
        <div class="user-Info">
          <input type="text" placeholder="请输入联系人姓名" id="contactName" ref="contactName">
          <p class="promptName">{{promptName}}</p>
          <input type="text" placeholder="情输入联系人手机号" id="contactMobile" ref="contactMobile">
          <p class="promptPhone">{{promptPhone}}</p>
          <input type="text" placeholder="情输入联系地址" id="contactAddress" ref="contactAddress">
          <p class="promptAddress">{{promptAddress}}</p>
      </div>
        <div class="button" @click="updateUserAddress">
          新增面签地址
        </div>
      </div>
      <div class="addressGray" @click="closeAdd" v-show="grayShow">

      </div>
      <div class="faceAddress">
        <ul class="addressList">
          <!--<li onclick="checkAddress(this)">
              <label class="demo&#45;&#45;label">
                  <input class="demo&#45;&#45;radio" type="radio" name="demo-radio">
                  <span class="demo&#45;&#45;radioInput"></span>
              </label>
              <div>
                  <p><span>唐宝剑</span><span>13545483665</span></p>
                  <p>上海市浦东新区张江镇张衡路1299号</p>
              </div>
          </li>
          <li onclick="checkAddress(this)">
              <label class="demo&#45;&#45;label">
                  <input class="demo&#45;&#45;radio" type="radio" name="demo-radio">
                  <span class="demo&#45;&#45;radioInput"></span>
              </label>
              <div>
                  <p><span>唐宝剑</span><span>13545483665</span></p>
                  <p>上海市浦东新区张江镇张衡路1299号</p>
              </div>
          </li>
          <li onclick="checkAddress(this)">
              <label class="demo&#45;&#45;label">
                  <input class="demo&#45;&#45;radio" type="radio" name="demo-radio">
                  <span class="demo&#45;&#45;radioInput"></span>
              </label>
              <div>
                  <p><span>唐宝剑</span><span>13545483665</span></p>
                  <p>上海市浦东新区张江镇张衡路1299号</p>
              </div>
          </li>-->
        </ul>
      </div>
      <div class="addressFooter" @click="applyLoad">
        申请贷款
      </div>
      <div class="model2">
        <div class="content2 after-line">操作成功</div>
        <div class="flexible">
          <p class="button2 after-line-left" @click="button1Click">确定</p>
        </div>
      </div>
      <div class="addressGray2" @click="closeAdd"></div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
              addShow:false,
              grayShow:false,
              promptName:"",  //姓名不能为空
              promptPhone:"",  //手机号不能为空
              promptAddress:"" //联系地址不能为空
            }
        },
        methods: {
          back(){
            this.goback()
          },
          showAddress(){
            this.addShow=true;
            this.grayShow=true;
          },
          closeAdd(){
            this.addShow=false;
            this.grayShow=false;
            this.$refs.contactName.value="";
            this.$refs.contactMobile.value="";
            this.$refs.contactAddress.value=""

          },
          updateUserAddress(){
            var flagName = false;
            var flagPhone = false;
            var flagAddress = false;
            var sendJSON = {};
            sendJSON.contactName = this.$refs.contactName.value;
            sendJSON.contactMobile = this.$refs.contactMobile.value;
            sendJSON.contactAddress = this.$refs.contactAddress.value;
            if (sendJSON.contactName == '') {
              flagName = false;
             this.promptName='姓名不能为空';
            } else {
              flagName = true;
              this.promptName='';
            }
            if (sendJSON.contactMobile == '') {
              flagPhone = false;
              this.promptPhone='手机号不能为空';
            } else {
              flagPhone = true;
              this.promptPhone='';
            }
            if (sendJSON.contactAddress == '') {
              flagAddress = false;
              this.promptAddress='联系地址不能为空';
            } else {
              flagAddress = true;
              this.promptAddress='';
            }
            if (flagName && flagPhone && flagAddress) {
              this.$http.post(this.urlHost + 'getUserAddressByUserId.do', JSON.stringify(sendJSON), {
                emulateJSON: true
              }).then(function (res) {
                this.addShow=false;
                this.grayShow=false;
               this.getUserAddressByUserId()
              }, function (res) {
                alert(res)
            });
            }
          },
          applyLoad(){
          /*  var sendJSON={};
            sendJSON.addressId=$("input[name=demo-radio]:checked").val();
            sendJSON.loanId=FOOTCommon.GetRequest().id;
            if (sendJSON.addressId == undefined) {
              return false
            } else {
              FOOTCommon.ajax("../!**!//../interview/update.do","POST",sendJSON,function(data){
                if(data.code == '0000') {
                  $('.addressGray2').show();
                  $('.model2').show();
                }
              },function(data){
                $('.register-tips').html("您的网络可能开小差了");
              })
            }*/
          },
          button1Click(){
          /*  $('.addressGray2').hide();
            $('.model2').hide();
            window.location.href="../home.html";*/
          },
          getUserAddressByUserId(){
            this.$http.post(this.urlHost + 'user/getUserAddressByUserId.do',{
              emulateJSON: true
            }).then(function (res) {
             console.log(res)

            }, function (res) {
              alert(res)
            });


          }
    }
    }
</script>
<style>
  .model2 {
    background-color: #fff;
    width: 80%;
    z-index: 100;
    position: fixed;
    top: 20%;
    left: 10%;
    border-radius: 10px;
    text-align: center;
    display: none;
  }
  .content2 {
    padding: 36px 30px;
    border-bottom: 1px solid #e9e9e9;
  }
  .button2 {
    line-height: 44px;
    box-flex: 1;    -webkit-box-flex: 1;    -moz-box-flex: 1;    flex: 1;    -webkit-flex: 1;    -ms-flex: 1; /* WP IE 10 */
  }

</style>
